<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-html="http://www.w3.org/1999/xhtml"
	  xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="UTF-8">
		<title>Vue Demo</title>
		<link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.5.81.all.css">		<!--自选版本-->
		<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>-->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 生产环境版本，优化了尺寸和速度 -->
		<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
		<style>
            span {
                background: red;
                display: inline-block;
                padding: 10px;
                color: #fff;
                margin: 10px 0;
            }

            .changeColor span {
                background: green;
            }

            .changeLength span:after {
                content: "length";
                margin-left: 10px;
            }
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<div>
					<div v-bind:class="computedClass">
						<span>点击切换颜色</span>
					</div>
					<input @blur="blurlllll()"  type="text" v-model="info">
					<span>{{info}}</span>
					<span>{{varChangeColor}}</span>
					<button @click="c()"></button>

				</div>
			</div>
		</div>
		<div style="background-color:black;height: 50px;width: 50px;">
			<i class="fa fa-check" style="color:white;height: 100%;width: 100%"  aria-hidden="true"></i>
		</div>

		<!--引入vue框架-->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
            var app = new Vue({
                el: '#app',
                data: {
                    info: "",
                    varChangeColor: false,
                },
                methods: {
                    blurlllll: function () {
                        let aaa = app.info;
                        if (aaa === "") {
                            app.varChangeColor = false;
                        } else {
                            app.varChangeColor = true;
                        }

                        console.log(123)
                    },
                    c: function () {
                        let aaa = app.info;
                        if (aaa === "") {
                            app.varChangeColor = false;
                        } else {
                            app.varChangeColor = true;
                        }                    }
                },
                computed: {
                    computedClass: function () {
                        return {
                            changeColor: this.varChangeColor,
                        }
                    },
                }
            })
		</script>
	</body>
</html>